<template>
  <form-dialog ref="formDrawerRef" title="复审修改" top="2vh" width="98%" @submit="handleSubmit">
    <div class="dialog-body">
      <el-table :data="tableData" border :header-cell-style="{ color: '#fff', backgroundColor: '#409EFF' }">

        <el-table-column prop="verificationMaterialName" label="证件" width="320" align="center" />
        <el-table-column prop="uploadTime" label="上传日期" width="120" align="center" />
        <el-table-column prop="department" label="审核部门" width="180" align="center"></el-table-column>
        <el-table-column prop="verificationApprover" label="审核人员" width="180" align="center"></el-table-column>
        <el-table-column prop="approvalPersonnelPhone" label="审核人电话" width="120" align="center" />
        <el-table-column prop="pushStatus" label="证件审核状态" width="120" align="center">
          <template #default="{ row }">
            {{ getPushStatusText(row.pushStatus) }}
          </template>
        </el-table-column>
        <el-table-column prop="approvalOpinion" label="审核意见" align="center" />
        <el-table-column prop="photo" label="图片" align="center">
          <template #default="{ row }">
            <!-- <el-image style="width: 100px; height: 100px" :src="row.photo" :preview-src-list="[row.photo]"> -->
              <el-image style="width: 100px; height: 100px" :src="row.photo">
            </el-image>
          </template>
          <!--  -->

        </el-table-column>
        <el-table-column prop="remark" label="操作" align="center" wifth="80">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleFileManage(row)">重新上传图片</el-button>
          </template>
        </el-table-column>

      </el-table>
      <form-dialog ref="detailRef" :appendToBody="true" top="30vh" width="50%" @submit="handleSubmitImg">
        <template #header>
          <span class="font-bold">{{ curTitle }}</span>
        </template>
        <div class="dialog-detail">
          <upload-img ref="uploadImgRef" :limit="1" :autoUpload="false" :imgList="curImgList" @remove="handleRemove"
            @success="handleUpdateImg"></upload-img>
        </div>
      </form-dialog>
    </div>
  </form-dialog>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { ElMessage } from "element-plus";
import FormDialog from "@/components/FormDialog.vue";
import { getViewAnnualReviewProgress, annualVerificationMaterials } from "@/api/annualAudit";
const tableData: any = ref([]);
const formDrawerRef = ref();
const handleOpen = (row: any) => {
  getViewAnnualReviewProgress(row.acceptanceId, "2").then((res) => {
    tableData.value = res;
    //console.log(res, '111');
  });

  formDrawerRef.value.open();
};
// 将 pushStatus 转换为文本描述
const getPushStatusText = (status: number) => {
  switch (status) {
    case 0:
      return "未审核";
    case 1:
      return "审核成功";
    case 2:
      return "审核失败";
    default:
      return "未知状态";
  }
};

// 上传图片标题
const curTitle = ref("");
const currentFileRow: any = ref({})

// 文件管理
const handleFileManage = (row: any) => {
  console.log(row)
  curTitle.value = `上传图片 -${row.project}- 所需图片${row.limit}张`;
  currentFileRow.value = row
  handleDetail(row);
};

// 上传图片-弹框
const detailRef = ref();
const www: any = ref([])
const handleDetail = (row: any) => {
  curImgList.value = currentFileRow.value.curImgList ? currentFileRow.value.curImgList : [];

  detailRef.value.open(row);
};
// 图片列表
const curImgList = ref<any[]>([
  // {
  //   url: "https://xct.gzwxxh.com/api/resources/xiechetong/upload/2024/06/54b9faa5-27ee-4803-bfdf-722552e440bd.jpeg"
  // },
  // {
  //   url: "https://xct.gzwxxh.com/api/resources/xiechetong/upload/2024/06/54b9faa5-27ee-4803-bfdf-722552e440bd.jpeg"
  // }
]);
const handleUpdateImg = (list: any) => {
  // ElMessage.success("上传成功");
  // curImgList.value = list;
  currentFileRow.value.curImgList = list;
  currentFileRow.value.saveImgNum = list.length;
  // 预览t图片 
  currentFileRow.value.photo = list.length> 0 ? list[0].url : '';

  console.log(list)
  www.value.push({
    photo: list.length > 0 ? list[0].url : '',
    acceptanceId: currentFileRow.value.acceptanceId,
    materialsId: currentFileRow.value.materialsId
  })

  detailRef.value.hideLoading();
  detailRef.value.close();
};
// 删除图片
const handleRemove = (list: any) => {
  curImgList.value = list;
};
const uploadImgRef = ref();
// 上传图片-确定
const handleSubmitImg = () => {
  detailRef.value.showLoading();
  uploadImgRef.value.handleManualUpload();
  // const form = {
  //   acceptanceId: currentFileRow.value.acceptanceId,
  //   materialsId: currentFileRow.value.id,
  //   photo: currentFileRow.value.photo
  // }


};

const handleSubmit = () => {
  annualVerificationMaterials(www.value).then((res) => {
    if (res) {
      ElMessage.success("上传成功");
    }
    detailRef.value.hideLoading();
  });
};


defineExpose({
  handleOpen
});
</script>
<style scoped lang="scss">
.dialog-body {
  height: calc(100vh - 180px);
  overflow-y: auto;
  overflow-x: hidden;
}

.dialog-detail {
  height: 200px;
}

:deep(.cell) {
  font-weight: 700;
}

:deep(.el-table__row .cell) {
  cursor: pointer;
}

:deep(.my-label) {
  font-weight: 700 !important;
}

:deep(.my-content) {
  width: 40% !important;
  font-weight: 700 !important;
}
</style>
